<template>
  <div class="card">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-button @click="showEdit()">新建</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click="delArrs()">批量删除</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click="addEdit()">同步品牌</a-button>
      </a-form-model-item>
    </a-form-model>

    <a-spin :spinning="loading" style="padding-top: 10px">
      <a-table
        bordered
        :filterMultiple="true"
        :rowSelection="{ onChange: onChanges }"
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change=";(pagination = $event), getDataList()"
      >
        <template slot="type" slot-scope="text">
          <a-tag color="blue" class="statusStyle" v-if="text == 1">正常</a-tag>
        </template>
        <span slot="image" slot-scope="text">
          <viewer :images="[text]">
            <img width="50px" height="50px" :src="text" alt="" />
          </viewer>
        </span>
        <span slot="content" slot-scope="text, record">
          <div v-html="record.content"></div>
        </span>
        <span slot="operate" slot-scope="text, record">
          <a-button type="link" @click="showEdit(record)">编辑</a-button>
          <a-button type="link" @click="delMessageItem(record)">删除</a-button>
        </span>
      </a-table>
    </a-spin>
    <editMessage ref="editMessage" @changes="getDataList"></editMessage>
  </div>
</template>

<script>
import { getMessageListApi, delMessageListApi } from '@/api/brand.js'
import editMessage from './diogla/editMessage.vue'
export default {
  name: 'list',
  components: {
    editMessage
  },
  data() {
    return {
      loading: false,
      selectedArrIds: [],
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 50
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '标题',
          dataIndex: 'title',
          align: 'center'
        },
        {
          title: '内容',
          dataIndex: 'content',
          align: 'center',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed: {},
  methods: {
    onChanges(selectedRowKeys, selectedRows) {
      console.log(selectedRows)
      selectedRows.forEach(element => {
        this.selectedArrIds.push(element.id)
      })
    },
    showEdit(jsons) {
      this.$refs.editMessage.openEditMessage(jsons)
    },
    delMessageItem(item) {
      var that = this
      this.$confirm({
        title: '确认删除吗？',
        content: '此操作不可撤回',
        okText: '确认',
        onOk() {
          that.delMessages([item.id])
        }
      })
    },
    delArrs() {
      var that = this
      this.$confirm({
        title: '确认删除吗？',
        content: '此操作不可撤回',
        okText: '确认',
        onOk() {
          that.delMessages(that.selectedArrIds)
        }
      })
    },
    delMessages(ids) {
      delMessageListApi({ ids: ids }).then(res => {
        this.$message.success('操作成功')
        this.getDataList()
      })
    },

    async getDataList() {
      this.loading = true
      this.selectedArrIds = []
      try {
        var json = {
          order: 'desc',
          order_by: 'id',
          page: this.pagination.current,
          page_size: this.pagination.pageSize,
          search: {
            brand_id: process.env.VUE_APP_BRAND_ID
          }
        }
        const { data } = await getMessageListApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
